/**
* @note 衣带渐宽终不悔,Bug寻得人憔悴
* @author yuliang
* @description 司机端/上传回单/图片上传
* @createDate 2020/8/26
*
*/

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  SafeAreaView,
  TouchableOpacity,
  DeviceEventEmitter
} from 'react-native';
// import { styles } from '../../../../../common';
// import { BackImage, msg, Header } from '../../../../common';
// import Picker from '../../../../common/picker';
// import LinearGradient from 'react-native-linear-gradient';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  isAndroid,
} from '../../../../../common/styles';

export default class NavTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: []
    };
  }

  tabClick = (index) => {
    let tabIndex = [this.props.index, index];
    DeviceEventEmitter.emit('tabIndex', tabIndex);
  }

  render() {
    const { left, right, defaultStyle, activeStyle, tabIndex, index } = this.props;
    console.log('父元素的长度=====>', index);
    return (
      <View style={styles.container}>
        <TouchableOpacity activeOpacity={1} onPress={() => { this.tabClick(0); }} style={tabIndex[index].index == 0 ? [activeStyle, styles.default] : [defaultStyle, styles.default]}>
          <Text style={tabIndex[index].index == 0 ? [styles.activeText, styles.fontSize14] : [styles.normalText, styles.fontSize14]}>{left}</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={1} onPress={() => { this.tabClick(1); }} style={tabIndex[index].index == 1 ? [activeStyle, styles.default] : [defaultStyle, styles.default]}>
          <Text style={tabIndex[index].index == 1 ? [styles.activeText, styles.fontSize14] : [styles.normalText, styles.fontSize14]}>{right}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: px2dp(40) * 2,
    borderRadius: px2dp(6) * 2,
    backgroundColor: '#F0EFEF',
    padding: px2dp(3) * 2,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  activeText: {
    color: '#343332',
  },
  normalText: {
    color: '#999896',
  },
  fontSize14: {
    fontSize: px2dp(14) * 2,
  },
  default: {
    width: '50%',
    height: '100%',
    borderRadius: px2dp(4) * 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  }
});
